<template>
  <div>
    <div class="el-flex">
      <div class="el-flex-1">{{libraryTypeTxt.name}}素材（共0篇）</div>
      <div style="padding-right:10px">
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2" size="small">
        </el-input>
      </div>
      <el-dropdown trigger="click">
        <el-button size="small" plain  class="el-dropdown-link">筛选</el-button>
        <el-dropdown-menu slot="dropdown">
            
            <el-dropdown-item  class="select-tag-box">
               <div class="select-tag-title">
                  素材标签（2）
               </div>
               <div class="select-tag-content">
                   <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2" size="mini"></el-input>
                    <div>
                        <el-tag size="small" closable v-for="(item,index) in tagsArray" :key="index" style="margin-right:20px;margin-top:10px" @close="delTag(index)">{{item.name}}</el-tag>
                    </div>
               </div>
                <div class="select-tag-foot">
                    <el-button @click="dialogVisibleLibrary = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="dialogVisibleLibrary = false"  size="small">确 定</el-button>
                </div>
            </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="primary" size="small" style="margin-left:10px" @click="addSource()">新建素材</el-button>
    </div>
    <el-empty :description="'还没有创建'+libraryTypeTxt.name+'素材哦～'"> </el-empty>
    <!-- 添加链接 -->
     <el-dialog
      title="添加链接"
      :visible.sync="dialogVisibleLink"
      width="620px"
      :before-close="handleClose">
      <el-form ref="form" :model="formLink" label-width="80px">
          <el-form-item label="链接地址" size="small">
              <el-input v-model="formLink.link" placeholder="链接地址请以http或者https开头"></el-input>
          </el-form-item>
          <el-form-item label="链接标题" size="small">
              <el-input v-model="formLink.name" placeholder="请输入链接标题"></el-input>
          </el-form-item>
          <el-form-item label="链接描述" size="small">
              <el-input v-model="formLink.des" placeholder="请输入链接链接描述" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="封面图" size="small">
             <el-upload
                class="uploader"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div>上传图片</div>
             </el-upload>
          </el-form-item>
        
        <el-divider></el-divider>
        <div style="margin-bottom:10px"><el-checkbox v-model="isSelectedTag">选择素材标签</el-checkbox></div>
        <div v-if="isSelectedTag"  style="margin-bottom:10px">
            <el-button plain size="mini"><i class="el-icon-plus">选择标签</i></el-button>
        </div>
        <div style="margin-bottom:10px"><el-checkbox v-model="saveRadar">保存为企业雷达</el-checkbox></div>
        <div style="text-align:right">
            <el-button @click="dialogVisibleLink = false" size="small">取 消</el-button>
            <el-button type="primary" @click="dialogVisibleLink = false"  size="small">确 定</el-button>
        </div>  
      </el-form>
        
    </el-dialog>
    <!-- 添加海报 -->
    <!-- 添加其它 -->
    <el-dialog
        :title="'上传'+libraryTypeTxt.name"
        :visible.sync="dialogVisibleLibrary"
        width="620px"
        :before-close="dialogBeforeClose">
        <div>
            <el-tag style="width:100%"><i class="el-icon-message-solid" ></i> 大于10M的文件会转换成链接展示 预览 </el-tag>
        </div>
        <el-upload
          class="upload-demo"
          drag
          :accept="libraryTypeTxt.type"
          action="https://jsonplaceholder.typicode.com/posts/"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__text">请上传{{libraryTypeTxt.name}}格式</div>
        </el-upload>
        <div slot="footer">
            <el-button @click="dialogVisibleLibrary = false" size="small">取 消</el-button>
            <el-button type="primary" @click="dialogVisibleLibrary = false"  size="small">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'other',
  props: {
    libraryTypeTxt: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      input2: '',
      formLink:{},
      dialogVisibleLink:false,
      isSelectedTag:false,
      saveRadar:false,
      dialogVisibleLibrary:false,
      accept:'',
       tagsArray:[
        {name:'我是你爸爸',id:1},
        {name:'一朵小红花',id:2},
      ],
    }
  },
  methods:{
      addSource(){
          if(this.libraryTypeTxt.name=='链接'){
              this.dialogVisibleLink=true
          }else{
              this.dialogVisibleLibrary=true
          }
      }
  }
}
</script>

<style lang="scss">
 .uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
     width: 120px;
    height: 120px;
  }
  .uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    margin-top: 30px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .upload-demo{
    margin: 50px auto;
    width: 100%;
    text-align: center;
  }
  .select-tag-box{
    width: 350px;
    padding: 0 !important;
    .select-tag-content{
       padding: 10px 20px; 
    }
    .select-tag-title{
       padding: 5px 20px; 
       border-bottom: 1px dashed #e1e1e1;
    }
    .select-tag-foot{
      padding: 10px 20px; 
      text-align: right;
    }
  }
</style>